<template>
  <div class="toolItem " v-tap="handleTap" :class="{disabled, selected }">
    <img class="toolIcon" :src="getIconByName(icon)" />
    <span class="toolText">{{ text }}</span>
  </div>
</template>

<script>
import { getToolIconByName } from "@/assets/tools/tools.js";

export default {
  name: "ToolButton",
  props: {
    disabled: {
      type: Boolean,
      default: false
    },
    selected: {
      type: Boolean,
      default: false
    },
    icon: {
      type: String
    },
    text: {
      type: String,
      default: ""
    }
  },
  methods: {
    getIconByName(name) {
      return getToolIconByName(name);
    },
    handleTap(event) {
      this.$emit("tap", event);
    }
  }
};
</script>

<style scoped>
.toolItem {
  display: flex;
  flex-shrink: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 4px 4px;
  margin: 4px 1px 4px 0;
  position: relative;
  pointer-events: all;
  min-width: 55px;
  border-radius: 5px;
  -webkit-tap-highlight-color: transparent;
}
.selected {
  box-shadow: inset rgba(0, 0, 0, 0.12) 0 1px 6px,
    inset rgba(0, 0, 0, 0.12) 0 1px 4px;
}
.toolItem.disabled .toolIcon,
.toolItem.disabled .toolText {
  opacity: 0.3;
}
.toolItem::before,
.toolItem::after {
  content: "";
  display: block;
  position: absolute;
  width: 1px;
  height: 21px;
  background: #f5f5f5;
}

.toolItem::before {
  left: -1px;
}

.toolItem::after {
  right: -1px;
}
.toolText {
  color: #000;
  font-size: 10px;
  text-transform: uppercase;
  pointer-events: none;
}
.toolIcon {
  width: 23px;
  height: 23px;
  flex-shrink: 0;
  pointer-events: none;
}
</style>